<script setup>
    import { ref, onMounted  } from 'vue'
    import * as echarts from "echarts"
    import 'echarts-liquidfill'

    const props = defineProps({
        // 在线数量
        onlineCount: {
            type: [Number, String],
            default: 0
        },

        // 总数
        totalCount: {
            type: [Number, String],
            default: 0
        },

        // 边框颜色
        borderColor: {
            type: String,
            default: '#427FD4'
        },

        // 字体颜色
        fontColor: {
            type: String,
            default: 'rgba(137, 229, 245, 1)'
        },
        
        // 波浪颜色
        waveColor: {
            type: String,
            default: 'rgba(137, 229, 245, 1)'
        },

        // 波浪颜色
        waveColor2: {
            type: String,
            default: 'rgba(137, 229, 245, 0.4)'
        },

    })


    const liquidFill = ref(null)
    let eCharts = null

    onMounted(()=>{
        // const option = {
        //     series: [{
        //         type: 'liquidFill',
        //         waveAnimation: false,
        //         animationDuration: 0,
        //         animationDurationUpdate: 0,
        //         data: [0.6, 0.5, 0.4, 0.3]
        //     }]
        // }
        const option = {
            // backgroundColor: 'rgba(255, 255, 255)',
            series: [
                {
                    // value: 50, //  内容 配合formatter
                    type: 'liquidFill',
                    radius: '80%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
                    center: ['50%', '50%'],
                    data: [
                        0.6,
                        {
                            value: 0.6,
                            direction: 'left', //波浪方向
                        },
                    ], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: 'rgba(68, 255, 255, 0.1)', // 球体本景色
                    },
                    amplitude: '6  %', //波浪的振幅
                    // 修改波浪颜色
                    // color: ['rgba(68, 255, 255, 1)', 'rgba(137, 229, 245, 1)'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: props.waveColor,
                                },
                                {
                                    offset: 0,
                                    color: props.waveColor2,
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    label: {
                        normal: {
                            // formatter: 0.87 * 100 + '\n%',
                            formatter: '在线' + props.onlineCount + '\n\n{d|总数}' + props.totalCount,
                            //  formatter: function(params){
                            //     return params.value* 100 + " \n%";
                            // },
                            rich: {
                                d: {
                                    fontSize: 14,
                                    color: '#fff',
                                },
                            },
                            textStyle: {
                                fontSize: 14,
                                color: props.fontColor,
                            },
                            
                        },
                    },
                    outline: {
                        show: false,
                    },
                },
                // {
                //     type: 'pie',
                //     z: 1,
                //     center: ['50%', '50%'],
                //     radius: ['72%', '72.5%'], // 控制外圈圆的粗细
                //     hoverAnimation: false,
                //     data: [
                //         {
                //             name: '',
                //             value: 500,
                //             labelLine: {
                //                 show: false,
                //             },
                //             itemStyle: {
                //                 color: '#00AFFF',
                //             },
                //             emphasis: {
                //                 labelLine: {
                //                     show: false,
                //                 },
                //                 itemStyle: {
                //                     color: '#00AFFF',
                //                 },
                //             },
                //         },
                //     ],
                // },
                {
                    //外发光
                    type: 'pie',
                    z: 1,
                    zlevel: -1,
                    radius: ['90%', '95.5%'],
                    center: ['50%', '50%'],
                    hoverAnimation: false,
                    clockWise: false,
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            color: props.borderColor,
                        },
                    },
                    label: {
                        show: false,
                    },
                    data: [100],
                },
                // {
                //     //底层外发光
                //     type: 'pie',
                //     z: 1,
                //     zlevel: -2,
                //     radius: ['70%', '100%'],
                //     center: ['50%', '50%'],
                //     hoverAnimation: false,
                //     clockWise: false,
                //     itemStyle: {
                //         normal: {
                //             borderWidth: 20,
                //             color: 'rgba(224,242,255,.4)',
                //         },
                //     },
                //     label: {
                //         show: false,
                //     },
                //     data: [100],
                // },
                // {
                //     type: 'pie',
                //     zlevel: 0,
                //     silent: true,
                //     radius: ['78%', '80%'],
                //     z: 1,
                //     label: {
                //         normal: {
                //             show: false,
                //         },
                //     },
                //     labelLine: {
                //         normal: {
                //             show: false,
                //         },
                //     },
                //     data: [0.6, 0.5, 0.4, 0.3]
                // },
            ],
        }

        eCharts = echarts.init(liquidFill.value)
        eCharts.setOption(option)
        window.addEventListener("resize",()=>{
            if(!eCharts)return;
            eCharts.resize();
        })
    })
</script>

<template>
    <div ref="liquidFill" class="liquidFill"></div>
</template>

<style lang="less" scoped>
    .liquidFill{
        width: 95px;
        height: 95px;
    }
</style>